Ext.define('account_manager.view.Viewport', {
	extend: 'Ext.container.Viewport',
	alias : 'widget.app_view',
	id : 'myviewport',
	layout: 'border',
	autoScroll : true,
	//frame : true,
	initComponent: function() {
		Ext.apply(this,{
			items : [{
				region: 'north',  
				title: 'Global WorkStation',
				id:'northView', 
				border: false,
				margins: '0 0 0 0',
				collapsible: true,
				split: true,
				//xtype:'box',
				height: 48,
				items :[tb]
			}, {
				region: 'west',
//				collapsible: true,
//				split: true,
//				title: 'Navigation',
				id:'westView',
				//frame : true,
				border : 0
//				width: 200,
//				// could use a TreePanel or AccordionLayout for navigational items
//				 items:[
//                        {
//                            xtype: 'app_menu'
//                        }                      
//                 ]
			},
			{
				region: 'center',
				id:'centerView'//,  
				//frame : true,
				//border : 0
//				xtype: 'panel', // TabPanel itself has no title
//				header : false//,
//				//title : 'Default Screen'
			}]
		});

		this.callParent(arguments);
	}
});

var tb = Ext.create('Ext.toolbar.Toolbar');
//tb.suspendLayout = true;

tb.add({
	text:'Institutional',
	menu: {
		items: [{
			text: 'Dashboard',
			id : 'dashboard',
			menu :{
				items :[{
					text : 'Issuer Risk'
				}]
			}
		},{
			text: 'IssuerRisk Report',
			id : 'issuerRiskReport'
		}
		]
	}  
});

var dateMenu = Ext.create('Ext.menu.DatePicker', {
	handler: function(dp, date){
		Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));

	}
});
